<template>
	<view class="main">
		<u-navbar title="群聊设置"></u-navbar>
		<view class="users">
			<view class="flex">
				<view v-for="item in gather.menberList.slice(0,19)" :key="item.userid"
					@click="goPage(true,`/pages_home/personalInfo/index?id=${item.userid}`)"
					class="users-list flex flex-dir-c flex-ai-c">
					<view class="head-img img">
						<image :src="item.handimg"></image>
					</view>
					<view>{{item.name || item.username}}</view>
				</view>
				<view class="users-list flex flex-jc-c">
					<view class="icon flex flex-ai-c flex-jc-c"
						@click="goPage(true,`/pages_new/invite_menber/index?id=${gather.info.crowd_id}&userid=${gather.selfInfo.userid}`)">
						<u-icon name="plus" size="40" color="rgb(130,130,130)"></u-icon>
					</view>
				</view>
			</view>
			<view :style="{'background':gather.isHove?'rgb(241, 243, 244)':''}" class="flex flex-jc-c flex-ai-c more"
				@touchstart="gather.isHove=true" @touchend="gather.isHove=false"
				@click="goPage(true,`/pages_new/menberList/index?id=${gather.info.crowd_id}&leaderid=${gather.info.leaderid}`)">
				<view>查看更多群成员</view>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>群聊名称</view>
				<view class="flex flex-ai-c">
					<u-input style="margin-left: 20rpx;" :disabled="gather.selfInfo.userid != gather.info.leaderid" @blur="crowdEdit" placeholder="" input-align="right"
						v-model="gather.info.title"></u-input>
					<u-icon size="16" name="arrow-right" v-if="gather.selfInfo.userid == gather.info.leaderid"></u-icon>
				</view>
			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list"
				@click="gather.selfInfo.userid == gather.info.leaderid ? chooseImg() : preview()">
				<view>群封面</view>
				<view class="flex flex-ai-c">
					<view class="head-img" style="width: 50rpx;height: 50rpx;">
						<image :src="gather.img"></image>
					</view>
					<u-icon size="16" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list" @click="">
				<view>群公告</view>
				<view class="flex flex-ai-c">
					<view>{{gather.info.announcement}}</view>
					<u-icon size="16" name="arrow-right"></u-icon>
				</view>

			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>备注</view>
				<view class="flex flex-ai-c">
					<u-input style="margin-left: 20rpx;" @blur="crowdEdit" placeholder="" input-align="right"
						v-model="gather.info.bz"></u-input>
					<u-icon size="16" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>聊天记录</view>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>消息免打扰</view>
				<u-switch v-model="gather.disturb"></u-switch>
			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>顶置聊天</view>
				<u-switch v-model="gather.overhead"></u-switch>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>群昵称</view>
				<u-input style="margin-left: 20rpx;" @blur="crowdEdit" placeholder="" input-align="right"
					v-model="gather.info.name"></u-input>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="set">
			<view class="flex flex-jc-sb flex-ai-c set-list">
				<view>设置聊天背景</view>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
			<view class="flex flex-jc-sb flex-ai-c set-list" @click="clearMsg">
				<view>清空聊天记录</view>
				<u-icon size="16" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="set">
			<view class="set-list out">
				<view>退出群聊</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import chat from '@/api/chat.js'
	import {
		reactive, inject
	} from 'vue'
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	interface info {
		[propName : string] : any
	}
	const socket: any = inject("$socket");
	let gather = reactive<info>({
		isHove: false,//鼠标是否悬停
		disturb: false,//免打扰
		overhead: false,//顶置
		name: '',//群昵称
		menberList: [],
		selfInfo: uni.getStorageSync('userinfo'),//自己的
		info: {},
		img: ''
	})
	const msgAlert : Function = inject('$msgAlert')
	const clearMsg = (item) => {
		socket.emit(`clear_romm_msg`,gather.selfInfo)
	}
	const preview = () => {
		if (!gather.img) return uni.showToast({
			title: '暂无封面',
			icon: 'none'
		})
		uni.previewImage({
			urls: gather.img,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function (data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function (err) {
					console.log(err.errMsg);
				}
			}
		})
	}
	const chooseImg = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有'original', 
			sourceType: ['album', 'original'], //从相册选择
			success: async (res : any) => {
				upload(res.tempFilePaths[0])
			}
		});
	}
	const upload = (file : string) => {
		uni.uploadFile({
			// @ts-ignore
			url: `${uni.$baseUrl}/upload`,
			filePath: file,
			name: 'file',
			fileType: 'image',
			header: {
				"Authorization": uni.getStorageSync('token')
			},
			formData: {
				id: gather.info.crowd_id,
				type: 3,
				path: 'crowd_img'
			},
			success: (res) => {
				let data = JSON.parse(res.data)
				if (data.status !== 200) return msgAlert(data.msg)
				gather.img = file
			}
		})
	}
	const goPage = (type : Boolean, str = '') => {
		if (!type) return uni.navigateBack()
		uni.navigateTo({
			url: str
		})
	}
	//修改群
	const crowdEdit = async () => {
		const { announcement, bz, name, title, is_overhead,crowd_id } = gather.info
		const res = await chat.crowdEdit({
			announcement,
			bz,	//群备注
			name,	//群昵称
			title,	//群名
			is_overhead,	//是否顶置0否 1是
			crowd_id
		})
		console.log(res)
	}
	//获取群成员
	const getMenber = async (id : String | Number, leaderid : String | Number) => {
		const res = await chat.crowdMenberList({
			id: id,
			leaderid: leaderid,
		})
		gather.menberList = res.data
	}
	const getCrowdList = async (id : number) => {
		const res = await chat.getCrowdList({
			id: id
		})
		gather.info = res.data[0]
		gather.img = res.data[0].img
	}
	onShow(()=>{
		getMenber(gather.info.crowd_id, gather.info.leaderid)
	})
	onLoad((op) => {
		gather.info.crowd_id = op.crowd_id
		gather.info.leaderid = op.leaderid
		getMenber(op.crowd_id, op.leaderid)
		getCrowdList(op.crowd_id)
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(241, 243, 244);
	}

	.main {

		.nav {
			position: fixed;
			width: 100%;
			height: 80rpx;
			border: 1px solid red;
		}

		.users {
			padding: 20rpx;
			background-color: #fff;
			//头像
			font-size: 18rpx;

			.more {
				height: 80rpx;
				margin-top: 20rpx;
				color: gray;
				font-size: 28rpx !important;
			}

			.head-img {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
					border: 1px solid rgb(200, 200, 200);
				}
			}

			&-list {
				width: 20%;

				.icon {
					border: 1px dashed rgb(130, 130, 130);
					height: 80rpx;
					width: 80rpx;
				}
			}
		}

		.set {
			margin-top: 20rpx;
			padding: 0 20rpx;
			background-color: #fff;
			line-height: 80rpx;

			&-list {
				border-bottom: 1px solid rgb(241, 243, 244);
			}

			.out {
				text-align: center;
				color: red;
			}
		}
	}
</style>